<!doctype html>
<head>
<meta charset="utf-8">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
<!--    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript"></script>
    <script>

<!--    $(document).ajaxSend(function (e, xhr, opt) {-->
<!--                var user_token = localStorage.getItem("user_token");-->
<!--                console.log(user_token);-->
<!--                xhr.setRequestHeader("user_token_header", user_token);-->
<!--    });-->

    $(document).ajaxError(function(){
<!--       alert("当前用户未登录，请先登录！");-->
       window.location.href="login.html";
    });

var user_token = localStorage.getItem("user_token");
console.log(user_token);
    function getUserInfo() {
    $.ajax({
        type: 'get',
        url: '/user/getuserInfo',
        headers: {
           'user_token_header': user_token
        },
        success: function(body) {
             console.log(body);
            // 校验结果是否有效.
            if (body.userId && body.userId > 0) {
                // 如果结果有效, 则把用户名显示到界面上.
                // 同时也可以记录 userId 到 html 标签的属性中，以备后用
                let userDiv = document.querySelector('body > div.layout > nav > div > ul > li:nth-child(4)');
                userDiv.innerHTML = body.username;
                console.log(body.userId);
                userDiv.setAttribute("user-id", body.userId);
            } else {
<!--                // 如果结果无效, 当前未登录! 则跳转到登录页面.-->
<!--                alert("当前用户未登录!");-->
<!--                window.location.href="login.html";-->
            }
        }
    });
}

getUserInfo();



function getUserAvatar1() {
    $.ajax({
        type: 'get',
        url: '/user/getavatar',
        headers: {
           'user_token_header': user_token
        },
        xhrFields: {
           responseType: "arraybuffer"
        },
        success: function(body) {
            // 校验结果是否有效.
            if (body) {
            // 将接收到的二进制数据转换为Base64格式
                var base64Image = arrayBufferToBase64(body);
                console.log(base64Image);
               // 将Base64格式的图片数据显示在前端界面上
               var s = '';
                s += '<img src="data:image/jpg;base64,' + base64Image + '" class="rounded-circle">';
                $('#avatar1').html(s);
            }
        }
    });

}
getUserAvatar1();

function getUserAvatar2() {
    $.ajax({
        type: 'get',
        url: '/user/getavatar',
        headers: {
           'user_token_header': user_token
        },
        xhrFields: {
           responseType: "arraybuffer"
        },
        success: function(body) {
            // 校验结果是否有效.
            if (body) {
            // 将接收到的二进制数据转换为Base64格式
                var base64Image = arrayBufferToBase64(body);
                console.log(base64Image);
               // 将Base64格式的图片数据显示在前端界面上
<!--               var s = '';-->
<!--                s += '<img src="data:image/jpg;base64,' + base64Image + '" class="rounded-circle">';-->
               $('body > div.layout > div > div.chat > div.self1 > div > div > div.outgoing-message > div.message-avatar > figure > img').attr('src', 'data:image/jpg;base64,' + base64Image);
            }
        }
    });

}
<!--getUserAvatar2();-->


function getUserAvatar3(username) {
    $.ajax({
        type: 'get',
        url: '/user/getavatar?username=' + username,
        headers: {
           'user_token_header': user_token
        },
        xhrFields: {
           responseType: "arraybuffer"
        },
        success: function(body) {
            // 校验结果是否有效.
            if (body) {
            // 将接收到的二进制数据转换为Base64格式
                var base64Image = arrayBufferToBase64(body);
                console.log(base64Image);
               // 将Base64格式的图片数据显示在前端界面上
<!--               var s = '';-->
<!--                s += '<img src="data:image/jpg;base64,' + base64Image + '" class="rounded-circle">';-->
               $('#avatar3 > img').attr('src', 'data:image/jpg;base64,' + base64Image);
            }
        }
    });
}


function getUserAvatar4(username, li) {
    $.ajax({
        type: 'get',
        url: '/user/getavatar?username=' + username,
        headers: {
           'user_token_header': user_token
        },
        xhrFields: {
           responseType: "arraybuffer"
        },
        success: function(body) {
            // 校验结果是否有效.
            if (body) {
            // 将接收到的二进制数据转换为Base64格式
                var base64Image = arrayBufferToBase64(body);
                console.log(username);
                console.log(base64Image);
                console.log(li);
               // 将Base64格式的图片数据显示在前端界面上
<!--               var s = '';-->
<!--                s += '<img src="data:image/jpg;base64,' + base64Image + '" class="rounded-circle">';-->
               let img = li.querySelector('div:nth-child(1) > figure > img');

               console.log(img);
               img.src = 'data:image/jpg;base64,' + base64Image;
            }
        }
    });
}


function getUserAvatar5(username, li) {
    $.ajax({
        type: 'get',
        url: '/user/getavatar?username=' + username,
        headers: {
           'user_token_header': user_token
        },
        xhrFields: {
           responseType: "arraybuffer"
        },
        success: function(body) {
            // 校验结果是否有效.
            if (body) {
            // 将接收到的二进制数据转换为Base64格式
                var base64Image = arrayBufferToBase64(body);
                console.log(username);
                console.log(base64Image);
                console.log(li);
               // 将Base64格式的图片数据显示在前端界面上
<!--               var s = '';-->
<!--                s += '<img src="data:image/jpg;base64,' + base64Image + '" class="rounded-circle">';-->
               let img = li.querySelector('figure > img');
               console.log(img);
               img.src = 'data:image/jpg;base64,' + base64Image;
            }
        }
    });
}


// 将ArrayBuffer转换为Base64格式
function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    for (var i = 0; i < bytes.byteLength; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

function getFriendList() {
    $.ajax({
        type: 'get',
        url: '/friend/getfriendList',
        headers: {
           'user_token_header': user_token
        },
        success: function(body) {
            // 1. 先把之前的好友列表的内容, 给清空
            let friendListUL = document.querySelector('#friends > div.sidebar-body > ul');
            friendListUL.innerHTML = '';
            // 2. 遍历 body, 把服务器响应的结果, 加回到当前的 friend-list 中.
            var s = '';
            for (let friend of body) {
                let li = document.createElement('li');
                li.className='list-group-item';
                li.setAttribute('data-navigation-target', 'chats');
                var s = '';
                s += '<div>';
                   s += '<figure class="avatar">';
                   s += '<img src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">';
                   s += '</figure>';
                   s += '</div>';
                   s += '<div class="parent">';
                   s += '<div class="child">';
                   s += '<h6>' + friend.friendName + '</h6>';
                   s += '</div>';
                   s += '</div>';
                li.innerHTML = s;
                // 此处把 friendId 也记录下来, 以备后用.
                // 把 friendId 作为一个 html 的自定义属性, 加到 li 标签上就行了.
                li.setAttribute('friend-id', friend.friendId);
                friendListUL.appendChild(li);
                // 每个 li 标签, 就对应界面上的一个好友的选项. 给这个 li 加上点击事件的处理.
                li.onclick = function() {
                    // 参数表示区分了当前用户点击的是哪个好友.
                    clickFriend(friend);
                }
                getUserAvatar4(friend.friendName, li);
            }
        },
        error: function() {
            console.log('获取好友列表失败!');
        }
    });
}

getFriendList();

// 点击好友列表项, 触发的函数
function clickFriend(friend) {
    // 1. 先判定一下当前这个好友是否有对应的会话.
    //    使用一个单独的函数来实现. 这个函数参数是用户的名字. 返回值是一个 li 标签. 找到了就是返回了对应会话列表里的 li; 如果没找到, 返回 null
    let sessionLi = findSessionByName(friend.friendName);
    let sessionListUL = document.querySelector('#chats > div > ul');
    if (sessionLi) {
        // 2. 如果存在匹配的结果, 就把这个会话设置成选中状态, 获取历史消息, 并且置顶.
        //    insertBefore 把这个找到的 li 标签放到最前面去.
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        //    此处设置会话选中状态, 获取历史消息, 这俩功能其实在上面的 clickSession 中已经有了.
        //    此处直接调用 clickSession 即可
        //    clickSession(sessionLi);
        //    或者还可以模拟一下点击操作.
        sessionLi.click();
    } else {
        // 3. 如果不存在匹配的结果, 就创建个新会话(创建 li 标签 + 通知服务器)
        sessionLi = document.createElement('li');
        //    构造 li 标签内容. 由于新会话没有 "最后一条消息", p 标签内容就设为空即可
        sessionLi.className='list-group-item';
        var s = '';
        s += '<figure class="avatar">';
        s += '<img src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">';
        s += '</figure>';
        s += '<div class="users-list-body">';
        s += '<div>';
        s += '<h5>' + friend.friendName + '</h5>';
        s += '<p></p>';
        s += '<div>';
        s += '<div>';
        sessionLi.innerHTML = s;
        getUserAvatar5(friend.friendName, sessionLi);
        sessionListUL.insertBefore(sessionLi, sessionListUL.children[0]);
        sessionLi.onclick = function() {
            clickSession(sessionLi);
        }
        sessionLi.click();
       //     发送消息给服务器, 告诉服务器当前新创建的会话是啥样的.
        createSession(friend.friendId, sessionLi);
    }
}

function findSessionByName(username) {
    // 先获取到会话列表中所有的 li 标签
    // 然后依次遍历, 看看这些 li 标签谁的名字和要查找的名字一致.
    let sessionLis = document.querySelectorAll('#chats > div > ul > li');
    for (let sessionLi of sessionLis) {
        // 获取到该 li 标签里的 h5 标签, 进一步得到名字
        let h5 = sessionLi.querySelector('h5');
        if (h5.innerHTML == username) {
            return sessionLi;
        }
    }
    return null;
}

// friendId 是构造 HTTP 请求时必备的信息
function createSession(friendId, sessionLi) {
    $.ajax({
        type: 'post',
        url: '/messagesession/addsession?toFriendId=' + friendId,
        headers: {
           'user_token_header': user_token
        },
        success: function(body) {
            console.log("会话创建成功! sessionId = " + body.sessionId);
            sessionLi.setAttribute('message-session-id', body.sessionId);
        },
        error: function() {
            console.log('会话创建失败!');
        }
    });
}





function getSessionList() {
    $.ajax({
        type: 'get',
        url: '/messagesession/getsessionList',
        headers: {
           'user_token_header': user_token
        },
        success: function(body) {
            // 1. 清空之前的会话列表
            let sessionListUL = document.querySelector('#chats > div > ul');
            sessionListUL.innerHTML = '';
            // 2. 遍历响应的数组, 针对结果来构造页面
            for (let session of body) {
                // 针对 lastMessage 的长度进行截断处理
                if (session.lastMessage.length > 10) {
                    session.lastMessage = session.lastMessage.substring(0, 10) + '...';
                }
                let li = document.createElement('li');
                // 把会话 id 保存到 li 标签的自定义属性中.
                li.setAttribute('message-session-id', session.sessionId);
                li.className='list-group-item';
                var s = '';
                s += '<figure class="avatar">';
                s += '<img src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">';
                s += '</figure>';
                s += '<div class="users-list-body">';
                s += '<div>';
                s += '<h5>' + session.friends[0].friendName + '</h5>';
                s += '<p>' + session.lastMessage + '</p>';
                s += '<div>';
                s += '<div>';
                li.innerHTML = s;
                sessionListUL.appendChild(li);
                getUserAvatar5(session.friends[0].friendName, li);
                // 给 li 标签新增点击事件
                li.onclick = function() {
                    // 这个写法, 就能保证, 点击哪个 li 标签
                    // 此处对应的 clickSession 函数的参数就能拿到哪个 li 标签.
                    clickSession(li);
                }
            }
        }
    });
}

getSessionList();

function clickSession(currentLi) {
    // 1. 设置高亮
    let allLis = document.querySelectorAll('#chats > div > ul > li');
    activeSession(allLis, currentLi);
    // 2. 获取指定会话的历史消息 TODO
    let sessionId = currentLi.getAttribute("message-session-id");
    getHistoryMessage(sessionId);
}

function activeSession(allLis, currentLi) {
    // 这里的循环遍历, 更主要的目的是取消未被选中的 li 标签的 className
    for (let li of allLis) {
        if (li == currentLi) {
            li.className = 'list-group-item open-chat';
        } else {
            li.className = 'list-group-item';
        }
    }
}

// 这个函数负责获取指定会话的历史消息.
function getHistoryMessage(sessionId) {
    console.log("获取历史消息 sessionId=" + sessionId);
    // 1. 先清空右侧列表中的已有内容
    let titleDiv = document.querySelector('body > div.layout > div > div.chat > div.chat-header > div > div > h5');
    titleDiv.innerHTML = '';
    let messageShowDiv = document.querySelector('body > div.layout > div > div.chat > div.self1 > div > div');
    messageShowDiv.innerHTML = '';

    // 2. 重新设置会话的标题. 新的会话标题是点击的那个会话上面显示的标题
    //    先找到当前选中的会话是哪个. 被选中的会话带有 selected 类的.
    let selectedH5 = document.querySelector('#chats > div > ul > li.list-group-item.open-chat > div.users-list-body > div > h5');
    if (selectedH5) {
        // selectedH5 可能不存在的. 比如页面加载阶段, 可能并没有哪个会话被选中.
        // 也就没有会话带有 selected 标签. 此时就无法查询出这个 selectedH5
        titleDiv.innerHTML = selectedH5.innerHTML;
    }
    // 3. 发送 ajax 请求给服务器, 获取到该会话的历史消息.
    $.ajax({
        type: 'get',
        url: '/message/getmessage?sessionId=' + sessionId,
        headers: {
           'user_token_header': user_token
        },
        success: function(body) {
            // 此处返回的 body 是个 js 对象数组, 里面的每个元素都是一条消息.
            // 直接遍历即可.
            for (let message of body) {
                addMessage(messageShowDiv, message, selectedH5.innerHTML);
            }


            // 加个操作: 在构造好消息列表之后, 控制滚动条, 自动滚动到最下方.
            scrollBottom(messageShowDiv);
        }
    });
}

function addMessage(messageShowDiv, message, h5) {

    // 使用这个 div 表示一条消息
    let messageDiv = document.createElement('div');
    // 此处需要针对当前消息是不是用户自己发的, 决定是靠左还是靠右.
    let selfUsername = document.querySelector('body > div.layout > nav > div > ul > li:nth-child(4)').innerHTML;
    if (selfUsername == message.fromName) {
        // 消息是自己发的. 靠右
        messageDiv.className = 'message-item outgoing-message';
         var s = '';
    s += '<div class="message-avatar">';
    s += '<figure class="avatar">';
    s += '<img src="" class="rounded-circle" alt="image">';
    s += '</figure>';
    s += '<div>';
    s += '<h5>' + message.fromName + '</h5>';
    s += '</div>';
    s += '</div>';
    s += '<div class="message-content">' + message.content + '</div>';
    messageDiv.innerHTML = s;
    messageShowDiv.appendChild(messageDiv);
     getUserAvatar2();
    } else {
        // 消息是别人发的. 靠左
        messageDiv.className = 'message-item';
         var s = '';
    s += '<div class="message-avatar">';
    s += '<figure id="avatar3" class="avatar">';
    s += '<img src="" class="rounded-circle" alt="image">';
    s += '</figure>';
    s += '<div>';
    s += '<h5>' + message.fromName + '</h5>';
    s += '</div>';
    s += '</div>';
    s += '<div class="message-content">' + message.content + '</div>';
    messageDiv.innerHTML = s;
    messageShowDiv.appendChild(messageDiv);
    getUserAvatar3(h5);
    }


}

// 把 messageShowDiv 里的内容滚动到底部.
function scrollBottom(elem) {
    let one = document.querySelector('body > div.layout > div > div.chat > div.self1');
    let length1 = one.offsetHeight;
    console.log(length1);
    let length2 = one.scrollHeight;
    console.log(length2);
    // 1. 获取到可视区域的高度
    let clientHeight = elem.offsetHeight;
    console.log(clientHeight);
    // 2. 获取到内容的总高度
    let scrollHeight = elem.scrollHeight;
    console.log(scrollHeight);
    // 3. 进行滚动操作, 第一个参数是水平方向滚动的尺寸. 第二个参数是垂直方向滚动的尺寸
    one.scrollTo(0, length2 - length1);
}








// 操作 websocket
// 创建 websocket 实例
// let websocket = new WebSocket("ws://127.0.0.1:8081/WebSocketMessage");
let websocket = new WebSocket("ws://" + location.host + "/WebSocketMessage");

websocket.onopen = function() {
    console.log("websocket 连接成功!");
}

websocket.onmessage = function(e) {
    console.log("websocket 收到消息! " + e.data);
    // 此时收到的 e.data 是个 json 字符串, 需要转成 js 对象
    let resp = JSON.parse(e.data);
     if (resp.action == 'redirect') {
          alert("您在其它设备已经登录过了，请退出其它设备的登录后再在此设备进行重新登录");
          window.location.href = "login.html";
          return;
     }
    if (resp.type == 'message') {
        // 处理消息响应
        handleMessage(resp);
    } else {
        // resp 的 type 出错!
        console.log("resp.type 不符合要求!");
    }
}

websocket.onclose = function() {
    console.log("websocket 连接关闭!");
}

websocket.onerror = function() {
    console.log("websocket 连接异常!");
}

// 实现消息接收逻辑
function handleMessage(resp) {
    // 把客户端收到的消息, 给展示出来.
    // 展示到对应的会话预览区域, 以及右侧消息列表中.

    // 1. 根据响应中的 sessionId 获取到当前会话对应的 li 标签.
    //    如果 li 标签不存在, 则创建一个新的
    let curSessionLi = findSessionLi(resp.sessionId);
    if (curSessionLi == null) {
        // 就需要创建出一个新的 li 标签, 表示新会话.
        curSessionLi = document.createElement('li');
        curSessionLi.setAttribute('message-session-id', resp.sessionId);
        // 此处 p 标签内部应该放消息的预览内容. 一会后面统一完成, 这里先置空
        curSessionLi.className='list-group-item';
        var s = '';
        s += '<figure class="avatar">';
        s += '<img src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">';
        s += '</figure>';
        s += '<div class="users-list-body">';
        s += '<div>';
        s += '<h5>' + resp.fromName + '</h5>';
        s += '<p></p>';
        s += '<div>';
        s += '<div>';
        curSessionLi.innerHTML = s;

        // 给这个 li 标签也加上点击事件的处理
        curSessionLi.onclick = function() {
            clickSession(curSessionLi);
        }

        let ul = document.querySelector('#chats > div > ul');
        ul.appendChild(curSessionLi);
    }
    // 2. 把新的消息, 显示到会话的预览区域 (li 标签里的 p 标签中)
    //    如果消息太长, 就需要进行截断.
    let p = curSessionLi.querySelector('#chats > div > ul > li > div > div > p');
    p.innerHTML = resp.content;
    if (p.innerHTML.length > 10) {
        p.innerHTML = p.innerHTML.substring(0, 10) + '...';
    }
    // 3. 把收到消息的会话, 给放到会话列表最上面.
    let sessionListUL = document.querySelector('#chats > div > ul');
    sessionListUL.insertBefore(curSessionLi, sessionListUL.children[0]);
    // 4. 如果当前收到消息的会话处于被选中状态, 则把当前的消息给放到右侧消息列表中.
    //    新增消息的同时, 注意调整滚动条的位置, 保证新消息虽然在底部, 但是能够被用户直接看到.
    if (curSessionLi.className == 'list-group-item open-chat') {
        // 把消息列表添加一个新消息.
        let messageShowDiv = document.querySelector('body > div.layout > div > div.chat > div.self1 > div > div');
        addMessage(messageShowDiv, resp, resp.fromName);
        scrollBottom(messageShowDiv);
    }
    // 其他操作, 还可以在会话窗口上给个提示 (红色的数字, 有几条消息未读), 还可以播放个提示音.
    // 这些操作都是纯前端的. 实现也不难, 不是咱们的重点工作. 暂时不做了.
}

function findSessionLi(targetSessionId) {
    // 获取到所有的会话列表中的 li 标签
    let sessionLis = document.querySelectorAll('#chats > div > ul > li');
    for (let li of sessionLis) {
        let sessionId = li.getAttribute('message-session-id');
        if (sessionId == targetSessionId) {
            return li;
        }
    }
    // 啥时候会触发这个操作, 就比如如果当前新的用户直接给当前用户发送消息, 此时没存在现成的 li 标签
    return null;
}



// 实现消息发送
window.onload = function(){
    // 1. 获取到发送按钮 和 消息输入框
    let sendButton = document.querySelector('body > div.layout > div > div.chat > div.chat-footer > form > div');
    let messageInput = document.querySelector('body > div.layout > div > div.chat > div.chat-footer > form > input');
    // 2. 给发送按钮注册一个点击事件
    if(sendButton) {
        sendButton.onclick = function() {
        // a) 先针对输入框的内容做个简单判定. 比如输入框内容为空, 则啥都不干
        if (!messageInput.value) {
            // value 的值是 null 或者 '' 都会触发这个条件
            return;
        }
        // b) 获取当前选中的 li 标签的 sessionId
        let selectedLi = document.querySelector('#chats > div > ul > li.list-group-item.open-chat');
        if (selectedLi == null) {
            // 当前没有 li 标签被选中.
            return;
        }
        let sessionId = selectedLi.getAttribute('message-session-id');
        // c) 构造 json 数据
        let req = {
            type: 'message',
            sessionId: sessionId,
            content: messageInput.value
        };
        req = JSON.stringify(req);
        console.log("[websocket] send: " + req);
        // d) 通过 websocket 发送消息
        websocket.send(req);
        // e) 发送完成之后, 清空之前的输入框
        messageInput.value = '';

     }
    }else {
       console.log("获取不到元素");
    }
}

</script>

</head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Slek - Chat and Discussion Platform</title>

    <!-- Favicon -->
    <link rel="icon" href="./dist/media/img/favicon.png" type="image/png">

    <!-- Bundle Styles -->
    <link rel="stylesheet" href="./vendor/bundle.css">

    <link rel="stylesheet" href="./vendor/enjoyhint/enjoyhint.css">

    <!-- App styles -->
    <link rel="stylesheet" href="./dist/css/app.min.css">
    <style>
            .parent {
                width: 200px;
                display: flex;
                align-items: center;
            }
            .child {
                width: 50%;
                height: 50%;
            }
<!--            ::-webkit-scrollbar {-->
<!--                    display: none;-->
<!--            }-->
            .self1 {
                width: 897px;
                height: 484px;
                overflow: auto;
            }
.search {
    height: 40px;
    padding: 0 20px;
    /* 使用弹性布局, 让里面的元素, 水平方向排列 */
    display: flex;
    justify-content: center;
    align-items: center;
}
button{
    background: none;
    border: none;
    width: 33px;
    height: 36px;
    float: left;
    outline: none;
}
button i{
    width: 17px;
    height: 17px;
    display: block;
    background: url(./dist/media/img/searchicon.png) no-repeat;
    margin-left: 6px;
}
button:hover i{
    background-position: 0px -20px;
}

nav.navigation ul li>a.active {
    background-color: #e6e6e6;
    color: #0a80ff;
}
nav.navigation ul li:not(.logo)>a {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
a:not(.active.list-group-item), a:not(.btn):active, a:not(.btn):focus, a:not(.btn):hover {
    text-decoration: none !important;
    color: #000;
    outline: 0;
}
nav.navigation ul li>a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 0;
    color: #828282;
    position: relative;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
a {
    color: #0a80ff;
}
a {
    color: #0a80ff;
    text-decoration: none;
    -webkit-transition: color .2s;
    -o-transition: color .2s;
    -moz-transition: color .2s;
    transition: color .2s;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
*, ::after, ::before {
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
nav.navigation ul li {
    list-style: none;
}
user agent stylesheet
li {
    text-align: -webkit-match-parent;
}
user agent stylesheet
ul {
    list-style-type: disc;
}
body {
    background-color: #fff;
    font-family: Inter, sans-serif;
    font-size: 14px;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
style attribute {
    --vh: 1.5px;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
    box-sizing: border-box;
}
*, ::after, ::before {
    box-sizing: border-box;
}
    </style>
</head>
<body>
<!-- edit profile modal -->
<!--<div class="modal fade" id="editProfileModal" tabindex="-1" role="dialog" aria-hidden="true">-->
<!--    <div class="modal-dialog modal-dialog-centered modal-dialog-zoom" role="document">-->
<!--        <div class="modal-content">-->
<!--            <div class="modal-header">-->
<!--                <h5 class="modal-title">-->
<!--                    <i data-feather="edit-2" class="mr-2"></i> Edit-->
<!--                </h5>-->
<!--                <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
<!--                    <div class="ti-close"></div>-->
<!--                </button>-->
<!--            </div>-->
<!--            <div class="modal-body">-->
<!--                <div class="tab-content">-->
<!--                    <div class="tab-pane show active" id="personal" role="tabpanel">-->
<!--                        <form>-->
<!--                            <div class="form-group">-->
<!--                                <label class="col-form-label">Avatar</label>-->
<!--                                <div class="d-flex align-items-center">-->
<!--                                    <div class="custom-file">-->
<!--                                        <input type="file" class="custom-file-input" id="customFile">-->
<!--                                        <label class="custom-file-label" for="customFile">Choose file</label>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </form>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="modal-footer">-->
<!--                <button type="button" class="btn btn-primary">Save</button>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!-- ./ edit profile modal -->

<!-- layout -->
<div class="layout">

    <!-- navigation -->
    <nav class="navigation">
        <div class="nav-group">
            <ul>
                <li class="logo">
                    <a href="#">
                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"

                             width="612px" height="612px" viewBox="0 0 612 612"
                             style="enable-background:new 0 0 612 612;" xml:space="preserve">
                            <g>
                                <g id="_x32__26_">
                                    <g>
                                    <path d="M401.625,325.125h-191.25c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h191.25
                                    c10.557,0,19.125-8.568,19.125-19.125S412.182,325.125,401.625,325.125z M439.875,210.375h-267.75
                                    c-10.557,0-19.125,8.568-19.125,19.125s8.568,19.125,19.125,19.125h267.75c10.557,0,19.125-8.568,19.125-19.125
                                    S450.432,210.375,439.875,210.375z M306,0C137.012,0,0,119.875,0,267.75c0,84.514,44.848,159.751,114.75,208.826V612
                                    l134.047-81.339c18.552,3.061,37.638,4.839,57.203,4.839c169.008,0,306-119.875,306-267.75C612,119.875,475.008,0,306,0z
                                    M306,497.25c-22.338,0-43.911-2.601-64.643-7.019l-90.041,54.123l1.205-88.701C83.5,414.133,38.25,345.513,38.25,267.75
                                    c0-126.741,119.875-229.5,267.75-229.5c147.875,0,267.75,102.759,267.75,229.5S453.875,497.25,306,497.25z"/>
                                    </g>
                                </g>
                            </g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                            <g></g>
                        </svg>
                    </a>
                </li>
                <li>
                    <a class="active" data-navigation-target="chats" href="#" data-toggle="tooltip" title="Chats"
                       data-placement="right">
                        <i data-feather="message-circle"></i>
                    </a>
                </li>
                <li class="brackets">
                    <a data-navigation-target="friends" href="#" data-toggle="tooltip"
                       title="Friends" data-placement="right">
                        <i data-feather="user"></i>
                    </a>
                </li>
                <li>

                </li>
                <li data-toggle="tooltip" title="Edit avatar" data-placement="right">
                    <a href="./login.html" data-toggle="dropdown">
                        <figure id="avatar1" class="avatar">
<!--                            <img id="avatar2" src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">-->
                        </figure>
                    </a>
                    <div class="dropdown-menu">
                        <a href="uploadavatar.html" class="dropdown-item">Edit</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <!-- ./ navigation -->


    <!-- content -->
    <div class="content">

        <!-- sidebar group -->
        <div class="sidebar-group">

            <!-- Chats sidebar -->
            <div id="chats" class="sidebar active">
                <header>
                    <span>Chats</span>
                </header>
                <div class="sidebar-body">
                    <ul class="list-group list-group-flush">
<!--                        <li class="list-group-item">-->
<!--                            <div>-->
<!--                                <figure class="avatar">-->
<!--                                    <img src="./dist/media/img/women_avatar5.jpg" class="rounded-circle" alt="image">-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                            <div class="users-list-body">-->
<!--                                <div>-->
<!--                                    <h5>急速锋</h5>-->
<!--                                    <p>月神殿</p>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
            <!-- ./ Chats sidebar -->

            <!-- Friends sidebar -->
            <div id="friends" class="sidebar">
                <header>
                    <span>Friends</span>
                </header>

                <div class="search">
                    <input type="text" class="form-control" placeholder="Search friends">
                    <button class="button"><i></i></button>
                </div>

                <div class="sidebar-body">

                    <ul id="info1" class="list-group list-group-flush">
<!--                        <li class="list-group-item" data-navigation-target="chats">-->
<!--                            <div>-->
<!--                                <figure class="avatar">-->
<!--                                    <img src="./dist/media/img/woman_avatar5.jpg" class="rounded-circle" alt="image">-->
<!--                                </figure>-->
<!--                            </div>-->
<!--                            <div class="parent">-->
<!--                                <div class="child">-->
<!--                                    <h6>火雷霆</h6>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </li>-->
                    </ul>
                </div>
            </div>
            <!-- ./ Friends sidebar -->


        </div >
        <!-- chat -->
        <div class="chat">
            <div class="chat-header">

                <div class="chat-header-user">
                    <div>
                        <h5></h5>

                    </div>
                </div>
            </div>
            <div class="self1">

                <div class="chat-body">
                    <div class="messages">
                        <img src="static1/picture/pig1.png">
                    </div>
                </div>
            </div>





            <div class="chat-footer">
                <form>
                    <input type="text" class="form-control" placeholder="Write a message.">
                    <div>
                        <div class="form-buttons">
                            <button id="button" class="btn btn-primary" type="submit">
                                <div data-feather="send"></div>
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
        <!-- ./ chat -->
    </div>
    <!-- ./ content -->

</div>

<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="./vendor/bundle.js"></script>
<script src="./vendor/feather.min.js"></script>
<script src="./vendor/enjoyhint/enjoyhint.min.js"></script>

<!-- App scripts -->
<script src="./dist/js/app.min.js"></script>
<!-- Examples -->
<script src="./dist/js/examples.js"></script>
</body>
</html>